import { useEffect } from 'react'
import { useState } from 'react'
// import 'antd/dist/antd.css'
// import Cart from './components/cart'
import { useDebounce } from 'use-debounce'
import { doSearch } from './api/request'

function App() {
const [userCollection, setUserCollection] = useState([])
const [filter, setFilter] = useState('')
const [debounceFilter] = useDebounce(filter, 500)
// console.log(debounceFilter)
useEffect(() => {
  if(!filter) {
    return 
  }

  (async() => {
    const {data: {results}} = await doSearch(filter);
    setUserCollection(results)
  })()
  // const result = doSearch(filter)
  // console.log(result)
  // const doSearch  = async () => {
  //   const {data:{results}} = await axios.get(`https://swapi.dev/api/people?search=${filter}`)
  //   // console.log(results)
  //   setUserCollection(results)
  // }
  doSearch()
    // fetch(`https://swapi.dev/api/people?search=${filter}`)
    // .then(response => response.json())
    // .then((json) => setUserCollection(json.results))
}, [debounceFilter])
  return (
    <div className="App">
      {/* <Cart /> */}
      <input value={filter} onChange={
        (e) => setFilter(e.target.value)
      } />
      <ul>
        {
          userCollection.map(({name}, index) => (
            <li key={{index}}>{name}</li>
          ))
        }
      </ul>
       {userCollection.length ==0 && <div>没有记录</div>}
     </div>
     
  )
}

export default App
